{include file="admin@public/header"/}

<link rel="stylesheet" href="/public/static/admin/css/report.css" />
<link rel="stylesheet" href="/public/static/admin/easyui/layui-v2.6.8/css/layui.css">
<!-- <link rel="stylesheet" type="text/css" href="/public/static/admin/easyui/jeasyui/themes/icon.css"> -->
<style>
	.ui-icon-ellipsis {
		right: 5px;
	}

	#filter-menu .con {
		width: 355px;
	}

	#filter-menu label.tit {
		width: 80px;
	}

	/*.ui-jqgrid tr.jqgrow td {
	white-space: normal !important;
	}
	*/
	.no-query {
		background: url("/public/static/admin/css/img/no_query.png") no-repeat scroll 100px 60px #fff;
		background-position: center;
		border: 1px solid #ddd;
		border-top: none;
		height: 402px;
		margin-right: 0;
	}

	.box-flex {
		overflow: hidden;
		zoom: 1;
	}

	.box-flex .flex {
		float: left;
		width: 33.3%;
	}

	.grid-title {
		font-size: 24px;
		text-align: center;
		clear: none;
	}

	.ui-print .grid-wrap {
		padding: 10px 0 0 30px;
	}

	#conditions-trigger {
		background: url(/public/static/admin/css/img/bg.png) no-repeat;
		border: 0px;
		width: 74px;
		box-shadow: 0px 0px;
	}

	#filter-menu .conditions-trigger>b {
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -8px;
		width: 16px;
		height: 16px;
		background: url(/public/static/admin/css/img/down.png) 2px 5px no-repeat;
	}

	#filter-menu .conditions-trigger>b.act {
		background: url(/public/static/admin/css/img/up.png) 2px 5px no-repeat;
	}

	#filter-menu .btns {
		position: absolute;
		top: 7px;
		right: 0px;
	}

	.layui-form-checkbox[lay-skin=primary] i {
		padding: 0;
	}

	.layui-form-checked[lay-skin=primary] i {
		border-color: #5dc5e7;
		background-color: #5dc5e7;
		color: #fff;
		padding: 0;
	}

	.layui-form-checkbox[lay-skin=primary]:hover i {
		border-color: #5dc5e7;
	}
    .layui-form-checkbox span{font-size: 12px;}
    .layui-form-checkbox[lay-skin=primary]{padding-left: 22px;}
    #filter-menu .mod-choose-input .ui-input{width: 120px;}
</style>

<div class="wrapper">
	<!-- header -->
	<div class="mod-search cf">
		<div class="l  layui-form" id="filter-menu">
			<ul class="ul-inline fix" id="filterItems" style="height: 44px;font-size: 12px;">
				<li id="date" style="display: list-item;"><label>单据日期:</label>
					<input type="date" id="startdate" class="ui-input " value="{$month.month_start|date='Y-m-d',###}" style="width: 125px;">
					<span class="todate"> 至 </span>
					<input type="date" id="enddate" class="ui-input " value="{$month.month_end|date='Y-m-d',###}" style="width: 125px;">
				</li>
                
				<!-- 选择客户 -->
				{include file="admin@select/customer"/}
                
                <!-- 选择供应商 -->
				{include file="admin@select/supplier"/}

				<!-- 收/付款人 -->
				{include file="admin@select/staff1"/}

                <li id="remarks" style="display: list-item;">
                    <label>备注:</label>
                    <input type="text" value="" class="ui-input ui-input-ph" name="remarkCon" id="remarkCon" placeholder="请输入备注查询" style="width: 120px;">
                </li>

				<!-- 结算账户 -->
				{include file="admin@select/account"/}

                <li id="othertype1" style="display: list-item;">
					<label>业务类型</label>
					<span class="ui-tree-wrap" style="width:180px;position: relative;overflow: visible;">
						<input type="text" class="input-txt" style="width:150px" id="catorage" autocomplete="off" placeholder="全部" value="">
                        <span class="trigger" id="catorage_trigger"></span>
					</span>
				</li>

				<div class="btns" style="top:0;"><a class="ui-btn mrb ui-btn-search" id="filter-submit">查询</a></div>
				<!-- <span class="url-box" id="openUrl"><a href="https://club.kingdee.com/club/newclub/school/course?product_id=7&amp;cid=1548#pid=5713" target="_blank" class="video-icon" style="margin-right: 5px;"></a>功能简介</span> -->
			</ul>
			<a href="#" id="conditions-trigger" class="ui-btn conditions-trigger" tabindex="-1">&nbsp;更多条件<b></b></a>
		</div>
	</div>

	<!-- 下拉树选择 -->
	<div class="ui-droplist-wrap" id="filterSelectBox" style="display: none; position: absolute; top: 30px; z-index: 1000;min-width: 120px; width: auto; left: 0;height:auto;overflow-y: auto;">
	
	</div>

	<!-- no data -->
	<div class="no-query"></div>
	<!-- grid begin -->
	<div class="ui-print" id="ui-print" style="visibility: hidden;">
		<!-- 列配置 -->
		<div class="cf box-flex">
			<div class="flex">
				<span id="config" class="ui-config"><a href="#" class="ui-icon-config-new"></a>列设置</span>
			</div>

			<div class="grid-title flex">现金银行报表</div>
			<div class="fr">
				<a href="#" class="ui-btn ui-btn-export btn-sm mrb fl" id="btn-export">导出</a>
				<a href="javascript:void(0)" class="ui-btn ui-btn-print btn-sm fl" id="btn-print"
					onclick="preview(1)">打印</a>
			</div>
		</div>

		<div class="grid-wrap" id="grid-wrap" style="padding-bottom: 30px;padding-right: 30px;">
			<!--startprint-->
			<!-- <div class="grid-title">现金银行报表</div> -->
			<div class="grid-subtitle"></div>
			<table id="grid"></table>
			<!--endprint-->
			<!-- <div id="page"></div> -->
		</div>
	</div>
	<!-- grid end -->

	
</div>
<input type="hidden" name="" value="" id="catorage_id">
<script type="text/javascript" src="/public/static/admin/easyui/jeasyui/jquery.easyui.min.js"></script>


<script>
    $(document).ready(function () {
		$('#filterSelectBox').tree({
			// url: 'getSupplierCategory.html',
			data: [{
				id:-1,
				text: '全部',
				children: [{
					id:2,
					text: '普通销售'
				},{
					id:3,
					text: '销售退回'
				},{
					id:4,
					text: '普通采购'
				},{
					id:5,
					text: '采购退回'
				},{
					id:0,
					text: '收款'
				},{
					id:1,
					text: '付款'
				},{
					id:10,
					text: '资金转账'
				},{
					id:11,
					text: '其他收入单'
				},{
					id:12,
					text: '其他支出单'
				}]
			}],
			checkbox:true,
			onClick: function (node) {
				if(node.checked){
                    $(this).tree('uncheck',node.target);
                }else{
                    $(this).tree('check',node.target);
                }

				//console.log(node);
				//供应商类别
	        //    $("#supplier_category_id").val(node.id);
	        //    $("#choice_supplier_category_name").val(node.name);
	        //    $("#filterSelectBox").hide();
			}
		});


        $("#othertype1 #catorage_trigger").on("click",function(){
            var top = $("#othertype1 .ui-tree-wrap").offset().top;
            var left = $("#othertype1 .ui-tree-wrap").offset().left;
            var width = $("#othertype1 .ui-tree-wrap").width();
            // $("#filterSelectBox").toggle();
			if($("#filterSelectBox").css("display") == "none"){
				$("#filterSelectBox").show();
			}else{
				$("#filterSelectBox").hide();
				var nodes = $('#filterSelectBox').tree('getChecked');
                var catorageText="";
                var catorageId="";
                for (let index = 0; index < nodes.length; index++) {
				    if(nodes[index].id!=-1){
						catorageText += nodes[index].text+",";
                        catorageId += nodes[index].id+",";
					}
                        
                }
				catorageId=catorageId.substr(0,catorageId.length-1)
				// console.log(catorageId);
                 $("#catorage").val(catorageText);
                 $("#catorage_id").val(catorageId);
			}
            $("#filterSelectBox").css({ "top": (top + 32) + "px", "left": (left) + "px", "minWidth": width + "px" });
        });
        //仓库选择框外点击则隐藏
        $(document).mouseup(function (e) {
            if(e.target.id!="catorage_trigger"){
                var con = $("#filterSelectBox");   // 设置目标区域
                if (!con.is(e.target) && con.has(e.target).length === 0) {
                    $("#filterSelectBox").hide();
                    var nodes = $('#filterSelectBox').tree('getChecked');
                    var catorageText="";
                    var catorageId="";
                    for (let index = 0; index < nodes.length; index++) {
						if(nodes[index].id!=-1){
							catorageText += nodes[index].text+",";
                            catorageId += nodes[index].id+",";
						}
                        
                    }
					catorageId=catorageId.substr(0,catorageId.length-1)
					// console.log(catorageId);
                    $("#catorage").val(catorageText);
                    $("#catorage_id").val(catorageId);
                }
            } 
        });
    })
</script>

<script type="text/javascript">

	$(document).ready(function () {

		// 点击查询按钮
		$("#filter-submit").click(function () {
			$("#ui-print").css({"visibility":"visible"});  //显示表格数据
			$(".no-query").hide();  //隐藏提示

			// 设置表格高度
			$("#grid").setGridHeight($(window).height()-210-$("#filter-menu").height()+"px");

			var startdate = $('#startdate').val();
			var enddate = $('#enddate').val();
			var user_id = $('#user_id').val();//选择客户
			var supplier_id = $('#supplier_id').val();//选择供应商
			var staff_id = $('#staff_id').val();//选择职员
			var account_id = $('#account_id').val();//选择账户
			var mark = $('#remarkCon').val();//选择整单备注
			var catorage_id = $('#catorage_id').val();//选择整单类型
		
			$("div.grid-subtitle").text("日期: " + startdate + " 至 " + enddate);

			
			//此处可以添加对查询数据的合法验证 
			$("#grid").jqGrid('setGridParam', {
				datatype: 'json',
				postData: { 'ajax': '100', 'startdate': startdate, 'enddate': enddate, 'user_id': user_id, 'staff_id':staff_id,'supplier_id':supplier_id,'mark':mark,'account_id':account_id,'catorage_id':catorage_id}, //发送数据 
				page: 1
			}).trigger("reloadGrid"); //重新载入 
		});

		//alert("1111");
		$("#grid").jqGrid({
			url: '/money/cashbank/index.html?ajax=100',
			datatype: "json",//数据来源，本地数据（local，json,jsonp,xml等）
			height: '90%',//高度，表格高度。可为数值、百分比或'auto'
			//width: Public.setGrid().w,
			//height: Public.setGrid().h,
			colNames: ["账户编号", "账户名称", "日期", "单据编号", "业务类型", "收入", "支出", "账户余额", "往来单位", "收/付款人", "备注",""],
			colModel: [
			
				{ name: 'account_sn', width: 80, label: "账户编号", align:"center"},
				{ name: 'account_name', width: 100, label: "账户名称", align:"center"},
				{ name: 'add_time', width: 110, label: "日期", align:"center"},
				{ name: 'psn', width: 110, label: "单据编号", align:"center" },
				{ name: 'o_type_name', width: 80, label: "业务类型", align:"center" ,summaryType: 'sum', summaryTpl: '<b> 小计 </b>', formatter: 'count' },
				{ name: 'r', width: 120, label: "收入", align:"right" },
				{ name: 'c', width: 120, label: "支出", align:"right" },
				{ name: 'money', width: 120, label: "账户余额", align:"right" ,summaryType: 'sum', summaryTpl: '<b> {0}</b>', formatter: 'number' },
				{ name: 'company', width: 120, label: "往来单位", align:"center" },
				{ name: 'saler', width: 120, label: "收/付款人", align:"center" },
				{ name: 'mark', width: 120, label: "备注", align:"center" },
				{ name:'account_id',  hidden:true},
			],
			rowNum: 10,
			rowList: [10, 20, 30],
			sortname: 'id',
			sortorder: "desc",
			pagerpos: "left",//分页位置

			pgbuttons: true,//翻页按钮
			pagination: true,
			altRows: false,
			gridview: !0,
			shrinkToFit: !1,
			cellLayout: 8,
			autowidth: !0,
			pager: "#page",
			viewrecords: !0,
			cmTemplate: {
				sortable: !1,
				title: !1
			},
			//合计
			footerrow: true,
			gridComplete: function () {
				var rs = parseFloat($("#grid").getCol('r', false, 'sum')).toFixed(2);
				var cs = parseFloat($("#grid").getCol('c', false, 'sum')).toFixed(2);
				var moneys = parseFloat($("#grid").getCol('money', false, 'sum')).toFixed(2);
				$("#grid").footerData('set', { "account_sn": '合计', r:rs, c:cs, money: moneys});

				// 合并合计单元格
				var $footRow = $("#grid").closest(".ui-jqgrid-bdiv").next(".ui-jqgrid-sdiv").find(".footrow");
				$footRow.find('>td[aria-describedby="grid_account_sn"], >td[aria-describedby="grid_account_name"], >td[aria-describedby="grid_add_time"], >td[aria-describedby="grid_psn"]').css("border-right-color", "transparent");
				
			},
			loadError: function (t, e, i) {
				parent.Public.tips({
					type: 1,
					content: "操作失败了哦，请检查您的网络链接！"
				})
			},
			//开启分组
			grouping: true,
			groupingView: {
				groupField: ['account_id'], //需要分组的列
				groupSummary: [true],         //是否显示汇总  如果为true需要在colModel中进行配置 如： summaryType:'sum', summaryTpl:'<b>小计: {0}</b>''
				groupColumnShow: [false],      //是否显示分组列
				groupCollapse: false,         //该属性表示在加载数据的时候是否只显示分组信息，false表示既显示分组信息也显示每个分组里面的详细信息，true则只显示分组信息
			},

		});

        
		var headH = 0;  //顶部搜索是否展开（1：展开，0：未展开）
		$("#conditions-trigger").click(function () {
			if(headH==0){
				headH=1;
				$("#filterItems").css({"height":"auto"});
				$(this).html("&nbsp;收起条件<b class='act'></b>");
				// 设置表格高度
				$(".ui-jqgrid .ui-jqgrid-bdiv").css({"max-height":$(window).height() - 330 - $("#filter-menu").height() + "px"});
			}else{
				headH=0;
				$("#filterItems").css({"height":"44px"});
				// $("#filterItems").animate({height:'44px'});
				$(this).html("&nbsp;更多条件<b></b>");
				// 设置表格高度
				$(".ui-jqgrid .ui-jqgrid-bdiv").css({"max-height":$(window).height() - 330 - $("#filter-menu").height() + "px"});
			}
		});
		

	});

	
</script>


{include file="admin@public/footer"/}